<template>
  <div class="app-container">
      <el-card>
        <div slot="header" class="clearfix">
          <span>
            <el-form :inline="true" :model="filters">
          <el-form-item label="菜单名称">
            <el-input v-model="filters.name" placeholder="名称" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
          </el-form-item>

          <el-form-item label="菜单类型">
            <el-select v-model="filters.type" placeholder="请选择">
              <el-option value="" label=""></el-option>
              <el-option value="0" label="目录"></el-option>
              <el-option value="1" label="菜单"></el-option>
              <el-option value="2" label="按钮"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="success" icon="el-icon-search" v-show="isAuth('sys:menu:search')" @click="handleSearch">查询</el-button>
            <router-link :to="{path:'/editMenu',query:{cache: true}}">
              <el-button type="primary" v-show="isAuth('sys:menu:add')"  icon="el-icon-plus" >新增</el-button>
            </router-link>
          </el-form-item>


        </el-form>
          </span>
        </div>
        <div>
          <tree-table v-loading="loading" :data="menus"  border>

            <el-table-column prop="name" label="名称" width="120" header-align="center">
              <template slot-scope="scope">
                <svg-icon v-if="scope.row.icon" :icon-class="scope.row.icon"></svg-icon>  {{generateTitle(scope.row.name)}}
              </template>
            </el-table-column>


            <el-table-column prop="path" label="路径" width="120" align="center">
            </el-table-column>
            <el-table-column prop="redirect" label="重定向路径" min-width="150" align="center">
            </el-table-column>


            <el-table-column prop="component" label="组件地址" min-width="160" align="center">
            </el-table-column>
            <el-table-column prop="perms" label="权限" width="160" align="center">
            </el-table-column>

            <el-table-column prop="type" label="类型" :formatter="formatterType" width="60" align="center">
            </el-table-column>


            <el-table-column prop="createdBy" label="创建人" align="center" width="80" >
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间" align="center" width="150" >
            </el-table-column>
            <el-table-column prop="lastModifiedBy" label="修改人" align="center" width="80"  >
            </el-table-column>
            <el-table-column prop="lastModifiedTime" label="修改时间" align="center" width="150">
            </el-table-column>
            <el-table-column prop="disabled" label="是否可用"  width="80" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.disabled" disabled> </el-switch>
              </template>
            </el-table-column>

            <el-table-column prop="enabledCache" label="可缓存"  width="80" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.enabledCache" disabled> </el-switch>
              </template>
            </el-table-column>

            <el-table-column
              label="操作" v-if="isAuth('sys:menu:delete') || isAuth('sys:menu:update')"
              min-width="120">
              <template slot-scope="scope">

                <el-button size="mini" v-show="isAuth('sys:menu:delete')"
                           @click="deleteCurrentRow(scope.$index, scope.row)"
                           :type="scope.row.disabled ? 'danger': 'success'"
                           :icon="scope.row.disabled ? 'el-icon-close':'el-icon-check'"
                           circle></el-button>
                <router-link :to="{path:'/editMenu',query:{id: scope.row.id,cache: true}}">
                  <el-button v-show="isAuth('sys:menu:update')" size="mini" type="primary" icon="el-icon-edit" circle></el-button>
                </router-link>
              </template>
            </el-table-column>
          </tree-table>
        </div>
      </el-card>

  </div>
</template>

<script>
  import { getMenuListPage,disabledOrEnabled } from '@/api/sys/menu/';
  import { generateTitle } from '@/utils/i18n'
  import treeTable from '@/components/TreeTable'
  import {isAuth} from '@/utils/'
  export default {
    name:'menuManage',
    components: { treeTable },
    data() {

      return {
        dialogFormVisible: false,
        filters: {
          name: '',
          type:''
        },
        tablePage:{
          currentPage:1,
          total:0,
          pageSize:10,
        },
        defaultCheckedKeys:[],
        loading: false,
        menus:[],
        currentSelectedRow:[],


      }
    },
    methods: {
      isAuth,

      setSelectedTreeNode(data,node,tree){
        this.menu.parentId=data.id;
        this.menu.parentName=data.name;
        this.treeShow=false;
      },
      formatterType(row, column, cellValue){
        if(cellValue == '0'){
            return "目录";
        }else if(cellValue == '1'){
            return "菜单"
        }else{
            return "按钮"
        }
      },


      saveRoleMenus(){
        let that = this;
        if(this.currentSelectedRow.length != 1){
          this.$message({
            message: '请选择一行数据',
            type: 'warning'
          });
          return;
        }
        let params = {
          id:this.currentSelectedRow[0].id,
        };

        this.treeShow = false;
      },

      getCurrentSelectedRow(selection){
        this.currentSelectedRow = selection;
        if(this.treeShow){
          this.treeShow = false;
        }

      },

      getChildrenMenuIds(data,ids){
        if(!data.leaf){
          if(data.children != null){
            data.children.forEach((item)=>{
              this.getChildrenMenuIds(item,ids);
            });
          }
        }
        ids.push(data.id);
      },
      deleteCurrentRow(index,row){
        let that = this;
        this.$confirm(row.disabled?'确定禁用？':'确定启用？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          disabledOrEnabled({id: row.id,disabled: !row.disabled}).then(function (result) {
            let {code,msg} = result.data;
            if(code == 0){
              that.$message({
                type: 'success',
                message: '操作成功!'
              });
              that.search();

            }else{
              that.$message.error(msg);
            }

          }).catch(function (error) {
           // that.$message.error('删除失败');
          });
        }).catch(()=>{
            console.info(345345435)
        });
      },
      handleSearch(){
        this.search();
      },

      search() {
        let that = this;
        that.loading = true;

        getMenuListPage(this.filters).then(function (result) {
          let {data,code} = result.data;

          that.menus= [];
          data.forEach((item) =>{
            that.menus.push(item);
          });
          that.loading = false;
        }).catch(function (error) {

        });


      },
      generateTitle
    },

    mounted() {
      this.search();
    }
  }
</script>

<style scoped>

</style>
